<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name=viewport
    content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
  <meta name="referrer" content="no-referrer">
  <title>播放器</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: auto;
      overflow: hidden;
    }

    body {
      display: flex;
    }

    #mse {
      flex: auto;
    }
  </style>
  <link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css">
  <script type="text/javascript">
    document.addEventListener('ready', () => {
      const resizeObserver = new ResizeObserver(() => {
        document.getElementById('mse').style.height = document.body.clientHeight + 'px'
      })
      resizeObserver.observe(document.body)
    })
</script>
</head>

<body>
  <div id="mse"></div>
  <script src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js" charset="utf-8"></script>
  <script src="https://unpkg.byted-static.com/xgplayer-mp4/3.0.10/dist/index.min.js" charset="utf-8"></script>
  <script type="text/javascript">
    let player = new Player({
      id: 'mse',
      autoplay: true,
      volume: 0.3,
      url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4',
      poster: "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/poster.jpg",
      playsinline: true,
      thumbnail: {
        pic_num: 44,
        width: 160,
        height: 90,
        col: 10,
        row: 10,
        urls: ['//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo-thumbnail.jpg'],
      },
      danmu: {
        comments: [
          {
            duration: 15000,
            id: '1',
            start: 3000,
            txt: '长弹幕长弹幕长弹幕长弹幕长弹幕',
            style: { //弹幕自定义样式
              color: '#ff9500',
              fontSize: '20px',
              border: 'solid 1px #ff9500',
              borderRadius: '50px',
              padding: '5px 11px',
              backgroundColor: 'rgba(255, 255, 255, 0.1)'
            }
          }
        ],
        area: {
          start: 0,
          end: 1
        }
      },
      height: window.innerHeight,
      width: window.innerWidth,
      plugins: [Mp4Plugin],
      mp4plugin: {
        maxBufferLength: 50,
        minBufferLength: 10,
      }
    });
    player.emit('resourceReady', [{ name: '超清', definition: '1080p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4' }, { name: '高清', definition: '720p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-480p.mp4' }, { name: '标清', definition: '480p', url: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4' }]);
  </script>
</body>

</html>
